<template>
	<view class="content">
		<view class="headerbgbox">
			<image :src="imageurl" mode=""></image>
		</view>
		<view class="imagebox" @click="gobaock">
			<image :src="proxy.serverimageUrl + 'back.png'" mode=""></image>
		</view>
		<view style="padding-top:300rpx;">
			<scroll-view scroll-y="true" class="textareabox">
				<view class="textarea-text">
					<view class="textarea-text-head">
						<image v-if="articledata.status != 2" class="image" :src="proxy.serverimageUrl + 'activty/labelicon.png'"
							mode=""></image>
<!-- 							<image v-if="articledata.status != 2" class="image" src="../../static/activty/labelicon.png"
								mode=""></image> -->
						<!-- <image v-else class="image" src="../../static/activty/labelicon2.png" mode=""></image> -->
						<image v-else class="image" :src="proxy.serverimageUrl + 'activty/labelicon2.png'" mode=""></image>
						<p class="titlename">{{articledata.activityName}}</p>
					</view>
					<view class="textarea-text-date">
						<!-- <image class="image" src="../../static/activty/date.png" mode=""></image> -->
						<image class="image" :src="proxy.serverimageUrl + 'activty/date.png'" mode=""></image>
						<p class="titlename">活动时间:{{articledata.activityBeginTime}}-{{articledata.activityEndTime}}</p>
					</view>
					<view class="textarea-text-date">
						<!-- <image class="image" src="../../static/activty/date.png" mode=""></image> -->
						<image class="image" :src="proxy.serverimageUrl + 'activty/date.png'" mode=""></image>
						<p class="titlename">报名时间:{{articledata.registrationBeginTime}}-{{articledata.registrationEndTime}}</p>
					</view>
					<view class="textarea-text-date">
						 
						<!-- <image class="image" src="../../static/activty/addr.png" mode=""></image> -->
						<image class="image" :src="proxy.serverimageUrl + 'activty/addr.png'"  mode=""></image>
						<p class="titlename">{{articledata.activityAddr}}</p>
					</view>
					<view class="kong-line">

					</view>
					<view class="imag-avatar" @click="querylikelist">
						<view class="imageboxs">
							<image v-for="(t,i) in articledata.avatars" :key="i" class="image-avatar" :src="t" mode="">
							</image>

						</view>
						<view class="avatar-right">
							<view class="text">
								{{articledata.enrollment}}人报名
							</view>
							<!-- <image src="../../static/activty/right-arrow.png" mode=""></image> -->
							<image :src="proxy.serverimageUrl + 'activty/right-arrow.png'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="textarea-content">
					<view class="content-haed">
						<view class="content-haed-left">

						</view>
						<view class="content-haed-text">
							活动介绍
						</view>
					</view>
					<view class="content-content">
						{{articledata.activityIntroduce}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-btn">
			<view class="kong">
				<view class="btnbox">
					<up-button
						v-if="(articledata.status == 0 || articledata.status == 1) && articledata.enrollStatus == 1"
						color="#2854B7" text="报名" @click="addenroll(0)"></up-button>
					<up-button v-else color="#B4B4B4" @click="editenroll(1)" :text="btntext"></up-button>
				</view>
			</view>

		</view>
		<up-popup :show="popshow" :round="10" @close="popclose" closeOnClickOverlay>
			<view class="scrviecontent">
				<p class="poptitle">报名的人</p>
				<scroll-view scroll-y="true" class="scrollView">
					<view class="itembox" v-for="(item,index) in likelist" :key="index">
						<view class="item-left">
							<view class="image-avatar">
								<image :src="item.avatar" mode=""></image>
							</view>
							<view class="textbox">
								<view class="nametext">
									<view class="name">
										{{item.memberName}}
									</view>
									<image v-if="item.employmentSituation == '会长'" :src="proxy.serverimageUrl+'member/1.png'"
										mode=""></image>
									<image v-if="item.employmentSituation == '副会长'" :src="proxy.serverimageUrl+'member/2.png'"
										mode=""></image>
									<image v-if="item.employmentSituation == '理事'" :src="proxy.serverimageUrl+'member/3.png'"
										mode=""></image>
									<image v-if="item.employmentSituation == '会员'" :src="proxy.serverimageUrl+'member/4.png'"
										mode=""></image>
								</view>
								<p class="corporatename">{{item.workUnit}}</p>
								<p class="corporatename">访问时间：{{item.createTime}}</p>
							</view>
						</view>
						<view class="item-right">
							<up-button @click="gomenber(item.mid)" text="访问" shape="circle" color="#2854B7"></up-button>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<up-modal :show="modalshow" closeOnClickOverlay @close="modalclose" @cancel="modalclose" @confirm="modalconfirm" :content='modalcontent' showCancelButton></up-modal>
	</view>
</template>

<script setup>
	import {
		defineProps,
		getCurrentInstance,
		ref,
		reactive
	} from 'vue'
	import {
		miniGetByAid,
		enroll,
		getMemberList
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
// import { log } from 'util';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const aid = ref('')
	const btntext = ref('')
	onLoad((o) => {
		aid.value = o.aid
		getarticle(o.aid)
	})
	/*弹框取消*/
	const modalclose = () =>{
		modalshow.value = false
	}
	/*点赞列表的数据*/
	const popshow = ref(false)
	const popclose = () => {
		popshow.value = false
	}
	const querylikelistdata = ref({
		pageNum: 1,
		pageSize: 10,
		aid: null
	})
	/*查询点赞列表*/
	const likelist = ref([])
	const querylikelist = () => {
		querylikelistdata.value.aid = aid.value
		popshow.value = true
		getMemberList(querylikelistdata.value).then(res => {
			likelist.value = res.rows
		})
	}
	/*modal弹窗确定事件*/
	const modalcontent = ref('是否取消报名？')
	const modalshow = ref(false)
	const modalconfirm = () => {
		let params = {
			aid: aid.value,
			mid: uni.getStorageSync('mid'),
			status: 1
		}
		enroll(params).then(res => {
			setTimeout(() => {
				uni.showToast({
					title: res.data,
					duration: 1000,
					icon: 'success'
				})
				setTimeout(() => {
					uni.hideToast();
					getarticle(aid.value)
				}, 1000)
			}, 0)
		})
	}
	/*取消报名*/
	const editenroll = (status) =>{
		if(articledata.value.status < 2){
			modalshow.value = true
		}
	}
	/*查询详情*/
	const imageurl = ref('')
	const articledata = ref({})
	const getarticle = (id) => {
		let params = {
			aid: id,
			mid: uni.getStorageSync('mid')
		}
		miniGetByAid(params).then(res => {
			if (res.code == 200) {
				articledata.value = res.data
				imageurl.value = res.data.commonFileRequests[0].url
				console.log(res.data)
				btntext.value = res.data.status == 2 ? '活动已结束' : res.data.status == 4 ? '报名已结束' : res.data.status == 3 ?
					'报名未开始' : res.data.enrollStatus == 0 ? '已报名' : ''
			}
		})
	}
	/*跳转会员详情*/
	const gomenber = (mid) =>{
		uni.navigateTo({
			url: '/subpages/memberdetail/index?mid=' + mid
		})
		popshow.value = false
	}
	/*确定报名*/
	const addenroll = (status) => {
		if (articledata.value.enrollStatus == 0) {
			modalshow.value = true
		} else {
			let params = {
				aid: aid.value,
				mid: uni.getStorageSync('mid'),
				status: status
			}
			enroll(params).then(res => {
				setTimeout(() => {

					uni.showModal({
						title:'提示',
						content:res.data,
						success:function(res){
							if(res.confirm){
								console.log('用户点击确定');
							}else if(res.cancel){
								console.log('用户取消')
							}
						}
					})
					setTimeout(() => {
						uni.hideToast();
						getarticle(aid.value)
					}, 1000)
				}, 0)
			})
		}
	}
	/*返回*/
	const gobaock = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		padding: 114rpx 0rpx 0;
		position: relative;
		background: #F5F5F5;

		.headerbgbox {
			width: 750rpx;
			height: 495rpx;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			background: rgba(255, 255, 255, .3);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.imagebox {
			// width: 100%;
			position: relative;
			z-index: 2;
			margin-left: 40rpx;

			image {
				width: 18rpx;
				height: 34rpx;
			}
		}

		.textareabox {
			// background-color: #ffffff;
			width: 100%;
			position: relative;
			z-index: 3;

			.textarea-text {
				padding: 54rpx 40rpx 30rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				background-color: #ffffff;

				.textarea-text-head {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.image {
						width: 112rpx;
						height: 44rpx;
					}

					.titlename {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 36rpx;
						color: #202020;
						margin-left: 14rpx;
					}
				}

				.textarea-text-date {
					margin-top: 24rpx;
					display: flex;
					align-items: center;

					.image {
						width: 30rpx;
						height: 30rpx;
					}

					.titlename {
						margin-left: 16rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #6B6B6B;
					}
				}

				.kong-line {
					width: 100%;
					height: 2rpx;
					margin-top: 40rpx;
					background: #F4F3F3;
				}

				.imag-avatar {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.imageboxs {
						display: flex;

						.image-avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
						}

						.image-avatar:nth-child(n+2) {
							margin-left: -20rpx;
						}
					}

					.avatar-right {
						display: flex;
						align-items: center;

						.text {
							margin-left: 12rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #979BA2;
						}

						image {
							width: 11rpx;
							height: 21rpx;
							margin-left: 18rpx;
						}
					}
				}
			}

			.textarea-content {
				margin-top: 20rpx;
				background-color: #ffffff;
				padding: 40rpx;

				.content-haed {
					display: flex;
					align-items: center;

					.content-haed-left {
						width: 18rpx;
						height: 18rpx;
						background-color: #ffffff;
						border-radius: 50%;
						border: 5rpx solid #2854B7;
					}

					.content-haed-text {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #202020;
						margin-left: 12rpx;
					}
				}

				.content-content {
					margin-top: 38rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #6B6B6B;
				}
			}
		}

		.bottom-btn {
			background: #FFFFFF;
			box-shadow: 0px 0px 21px 4px rgba(216, 217, 219, 0.56);
			width: 100%;
			height: 110rpx;
			position: fixed;
			bottom: 0;
			z-index: 999;

			.kong {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 110rpx;

				.btnbox {
					width: 670rpx;
					height: 90rpx;
				}
			}

		}
		.scrviecontent {
			padding: 55rpx 40rpx;
		
			.poptitle {
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #202020;
			}
		
			.scrollView {
				.itembox {
					margin-top: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-left{
						display: flex;
						align-items: center;
						.image-avatar{
							width: 118rpx;
							height: 118rpx;
							border-radius: 50%;
							image{
								width: 118rpx;
								height: 118rpx;
								border-radius: 50%;
							}
						}
						.textbox{
							margin-left: 28rpx;
							.nametext{
								display: flex;
								align-items: center;
								.name{
									font-family: Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 34rpx;
									color: #252525;
								}
								image{
									margin-left: 18rpx;
									width: 104rpx;
									height: 43rpx;
								}
							}
							.corporatename{
								margin-top: 18rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #BBC0CA;
							}
						}
					}
					.item-right{
						width: 140rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>